<!-- 字体样式 -->
<template>
    <div class="si-font-style">
        <div v-if="currentFontSize !== undefined" class="col-item">
            <el-tooltip effect="dark" content="字体大小" placement="top" :show-after="300">
                <si-input-number
                    v-model="currentFontSize"
                    :min="0"
                    unit="px"
                />
            </el-tooltip>
        </div>
        <div v-if="currentFontWeight !== undefined" class="col-item">
            <el-tooltip effect="dark" content="粗体" placement="top" :show-after="300">
                <el-check-tag
                    :checked="currentFontWeight === 'bold'"
                    @change="val => currentFontWeight = val ? 'bold' : ''"
                >
                    <el-icon><icon-bold /></el-icon>
                </el-check-tag>
            </el-tooltip>
        </div>
        <div v-if="currentFontStyle !== undefined" class="col-item">
            <el-tooltip effect="dark" content="斜体" placement="top" :show-after="300">
                <el-check-tag
                    :checked="currentFontStyle === 'italic'"
                    @change="val => currentFontStyle = val ? 'italic' : ''"
                >
                    <el-icon><icon-italic /></el-icon>
                </el-check-tag>
            </el-tooltip>
        </div>
        <div v-if="currentTextDecoration !== undefined" class="col-item">
            <el-tooltip effect="dark" content="下划线" placement="top" :show-after="300">
                <el-check-tag
                    :checked="currentTextDecoration === 'underline'"
                    @change="val => currentTextDecoration = val ? 'underline' : ''"
                >
                    <el-icon><icon-underline /></el-icon>
                </el-check-tag>
            </el-tooltip>
        </div>
        <div v-if="currentColor !== undefined" :span="3" class="col-item">
            <el-tooltip effect="dark" content="字体颜色" placement="top" :show-after="300">
                <si-color-picker
                    v-model="currentColor"
                    show-alpha
                />
            </el-tooltip>
        </div>
        <div v-if="currentTextAlign !== undefined" :span="3" class="col-item">
            <el-tooltip effect="dark" content="对齐方式" placement="top" :show-after="300">
                <si-dropdown
                    :list="['left', 'center', 'right']"
                    @command="val => currentTextAlign = val"
                >
                    <el-icon style="font-size: 18px;">
                        <icon-text-align-left v-if="currentTextAlign === 'left'" />
                        <icon-text-align-center v-if="currentTextAlign === 'center'" />
                        <icon-text-align-right v-if="currentTextAlign === 'right'" />
                    </el-icon>
                    <template #dropdownItem="{ element }">
                        <el-icon style="font-size: 18px;">
                            <icon-text-align-left v-if="element === 'left'" />
                            <icon-text-align-center v-if="element === 'center'" />
                            <icon-text-align-right v-if="element === 'right'" />
                        </el-icon>
                    </template>
                </si-dropdown>
            </el-tooltip>
        </div>
    </div>
</template>

<script>
import { defineComponent, toRefs, computed } from 'vue'
import SiColorPicker from '../si-color-picker'
import SiInputNumber from '../si-input-number'
import SiDropdown from '../si-dropdown'
export default defineComponent({
    name: 'SiFontStyle',
    components: {
        SiColorPicker,
        SiInputNumber,
        SiDropdown
    },
    props: {
        fontSize: {
            type: [String, Number]
        },
        fontWeight: {
            type: String
        },
        fontStyle: {
            type: String
        },
        textDecoration: {
            type: String
        },
        color: {
            type: String
        },
        textAlign: {
            type: String
        }
    },
    emits: [
        'update:fontSize',
        'update:fontWeight',
        'update:fontStyle',
        'update:textDecoration',
        'update:color',
        'update:textAlign'
    ],
    setup(props, { emit }) {
        const { fontSize, fontWeight, fontStyle, textDecoration, color, textAlign } = toRefs(props)

        const currentFontSize = computed({
            get: () => fontSize.value,
            set: val => emit('update:fontSize', val)
        })
        const currentFontWeight = computed({
            get: () => fontWeight.value,
            set: val => emit('update:fontWeight', val)
        })
        const currentFontStyle = computed({
            get: () => fontStyle.value,
            set: val => emit('update:fontStyle', val)
        })
        const currentTextDecoration = computed({
            get: () => textDecoration.value,
            set: val => emit('update:textDecoration', val)
        })
        const currentColor = computed({
            get: () => color.value,
            set: val => emit('update:color', val)
        })
        const currentTextAlign = computed({
            get: () => textAlign.value,
            set: val => emit('update:textAlign', val)
        })

        return {
            currentFontSize,
            currentFontWeight,
            currentFontStyle,
            currentTextDecoration,
            currentColor,
            currentTextAlign
        }
    }
})
</script>

<style lang="less" scoped>
.si-font-style {
    display: flex;
    align-items: center;
    .col-item {
        & + .col-item {
            margin-left: 5px;
        }
    }
}
</style>